<template>
  <div class="bottom-bar">
    <div class="bottom-item bottom-left" @click="checkAll">
      <check-button :is-checked="isCheckAll"></check-button>
      <span class="check-text">全选</span>
    </div>

    <div class="bottom-item bottom-center">
      合计：
      <span class="total-price">￥{{ totalPrice }}</span>
    </div>

    <div class="flex"></div>

    <div class="bottom-item bottom-right" @click="toCalculate">
      <span>去计算({{ checkProductLength }})</span>
    </div>
  </div>
</template>

<script>
import CheckButton from "./CheckButton";

// vuex
import { mapGetters } from "vuex";
import { mapMutations } from "vuex";
import { CHECK_ALL } from "@/store/mutation-types";

export default {
  name: "CartBottomBar",
  components: {
    CheckButton,
  },

  // 过滤器
  filters: {
    // 保留两位小数
    keepTwoDecimal() {},
  },

  data() {
    return {
      // isCheckAll: false,
    };
  },

  // 计算属性
  computed: {
    ...mapGetters(["cartList", "cartLength"]),

    // 已选中商品列表
    checkProduct() {
      return this.cartList.filter((item) => item.checked);
    },

    // 已选中商品列表长度
    checkProductLength() {
      return this.checkProduct.length;
    },

    // 计算已选中商品的总价
    totalPrice() {
      // prev: 上一次函数的返回值, 求累加, 0为默认值设置
      return this.checkProduct
        .reduce((prev, item) => prev + parseFloat(item.price) * item.count, 0)
        .toFixed(2);
    },

    // 是否全选
    isCheckAll() {
      return this.cartLength
        ? !this.cartList.some((item) => item.checked == false)
        : false;
    },
  },

  methods: {
    // 映射关系 例如 this.commitCheck(this.isCheckAll) == this.$store.commit(CHECK_ALL, this.isCheckAll)
    ...mapMutations({
      commitCheck: CHECK_ALL,
    }),

    // 全选与全不选
    checkAll() {
      // this.$store.commit(CHECK_ALL, this.isCheckAll);
      // 因为使用mapMutations辅助函数所以 上面代码可以简化成如下
      this.commitCheck(this.isCheckAll);
    },

    // 去计算
    toCalculate() {
      this.checkProductLength || this.$toast.show("你还没有选择任何商品哦~");
    },
  },
};
</script>

<style lang="less" scoped>
.bottom-bar {
  position: relative;
  display: flex;
  height: 44px;
  padding-left: 12px;
  align-items: center;

  font-size: 15px;
  text-align: center;

  background-color: rgb(241, 240, 240);
  border-bottom: 2px solid var(--color-bottom);

  .flex {
    flex: 1;
  }

  .bottom-item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bottom-left {
    .check-text {
      margin-left: 8px;
    }
  }

  .bottom-center {
    margin-left: 15px;
    // color: #333333;
    .total-price {
      font-size: 16px;
      font-weight: 700;
      color: var(--color-red);
    }
  }

  .bottom-right {
    width: 100px;
    color: var(--color-background);
    // background-color: var(--color-tint);
    background-image: linear-gradient(
      to right,
      var(--color-tint),
      var(--color-high-text)
    );
  }
}
</style>
<style>
.a {
  background-color: rgba(207, 220, 252, 0.8);
}
</style>